<!DOCTYPE html>
<html>

<head>
    <!-- 4. 不同字体高度问题 -->
    <meta charset="utf-8">
    <title>4. 不同字体高度问题</title>


    <style>

        .box{
            font-size: 100px;
            color: #ffffff80;
            background-color: darkmagenta;
            color: #ffffff80;
            margin-bottom: 20px;
            height: 300px;
        }


        .tag{
            /* 行内元素加背景色，高度取决于不同字体，不好控制，可以使用行内块元素 */

            background-color: #9e9e9eb3;
            margin-right: 5px;
        }
    </style>

</head>

<body>
    <div class="box">
        <span class="tag">中国</span>
        <span class="tag" style="font-family: Microsoft YaHei UI;">中国</span>
        <span class="tag" style="font-family: 宋体;">中国</span>
        <span class="tag" style="font-family: Segoe Print;">中国</span>
    </div>

    <p>这个问题和具体的字体有关，我猜测是因为字体中有一个属性来控制高度</p>
</body>

</html>
